<template>
  <div class="tour_div" v-if="user_info">
    <!-- 背景部分 -->
    <div 
      class="tour_bg" 
      :style="{
        background:'url('+ getImgPath + user_info.Headpath +')',
        backgroundSize:'100%',
        backgroundPosition: 'center'
        }"></div>
    <!-- 头像部分 -->
    <router-link to="userinfo">
      <div 
      class="user_header"
      :style="{
        background:'url('+ getImgPath + user_info.Headpath +')',
        backgroundSize:'100%',
        backgroundPosition: 'center'
        }"></div>
    </router-link>
    <!-- 昵称部分 -->
    <p class="user_nickname" v-if="user_info.nickName">{{user_info.nickName}}</p>
    <a class="login_btn" v-if="!user_info.nickName" href="javascript:" @click="UserLogin">登录</a>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name:"Tour",
  props:["user_info"],
  data() {
    return {
      
    }
  },
  methods: {
    // 登录
    UserLogin(){
      this.$router.push("/login")
    }
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    })
  }
}
</script>
<style lang="less" scoped>
  .tour_div{
    position: relative;
    height:2.4rem;
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
  }

  .tour_bg{
    width: 100%;
    height: 100%;
    filter: blur(0.18rem);
  }

  .user_header{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-90%);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 100%;
    background-color: #999;
  }

  .user_nickname{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,120%);
    z-index: 1;
    font-size: 0.2rem;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0.05rem 0.04rem 0.03rem rgba(0, 0, 0, .8);
  }

  .login_btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,100%);
    z-index: 1;
    color: #ffffff;
    font-size: 0.14rem;
    background-color: #E74E4B;
    padding: 0.08rem 0.2rem;
    border-radius: 0.2rem;
    box-sizing: border-box;
    box-shadow: 0.05rem 0.04rem 0.03rem rgba(0, 0, 0, .5);
  }
</style>